<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kafka API 测试页面</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px; 
            background-color: #f5f5f5; 
        }
        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            background: white; 
            padding: 20px; 
            border-radius: 8px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
        }
        .header { 
            text-align: center; 
            margin-bottom: 30px; 
            padding: 20px; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            color: white; 
            border-radius: 8px; 
        }
        .test-section { 
            margin: 20px 0; 
            padding: 20px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            background: #fafafa; 
        }
        .test-section h3 { 
            color: #333; 
            margin-top: 0; 
        }
        .test-button { 
            background: #007bff; 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 4px; 
            cursor: pointer; 
            margin: 5px;
            transition: all 0.3s;
        }
        .test-button:hover { 
            background: #0056b3; 
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .test-button:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
        }
        .test-button.success { 
            background: #28a745; 
        }
        .test-button.error { 
            background: #dc3545; 
        }
        .result-area { 
            margin-top: 15px; 
            padding: 15px; 
            background: #f8f9fa; 
            border-radius: 4px; 
            border-left: 4px solid #007bff;
            max-height: 400px;
            overflow-y: auto;
        }
        .result-area.success { 
            border-left-color: #28a745; 
        }
        .result-area.error { 
            border-left-color: #dc3545; 
        }
        .loading { 
            color: #6c757d; 
            font-style: italic; 
        }
        .api-list { 
            list-style: none; 
            padding: 0; 
        }
        .api-list li { 
            margin: 10px 0; 
            padding: 10px; 
            background: white; 
            border-radius: 4px; 
            border: 1px solid #e9ecef; 
        }
        .api-method { 
            display: inline-block; 
            padding: 2px 8px; 
            border-radius: 3px; 
            font-size: 12px; 
            font-weight: bold; 
            margin-right: 10px; 
        }
        .api-method.get { 
            background: #d4edda; 
            color: #155724; 
        }
        .api-method.post { 
            background: #cce5ff; 
            color: #004085; 
        }
        .status-indicator { 
            display: inline-block; 
            width: 10px; 
            height: 10px; 
            border-radius: 50%; 
            margin-right: 8px;
            animation: pulse 2s infinite;
        }
        .status-online { 
            background: #28a745; 
        }
        .status-offline { 
            background: #dc3545; 
        }
        .status-unknown { 
            background: #ffc107; 
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        pre {
            background: #282c34;
            color: #abb2bf;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 10px 0;
        }
        .input-group {
            margin: 10px 0;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        .input-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            margin-left: 10px;
        }
        .badge.info {
            background: #e7f3ff;
            color: #0066cc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 Kafka API 测试中心</h1>
            <p>测试 Kafka 连接 (192.168.200.131:9092) 和各个 API 功能</p>
            <div id="kafka-status">
                <span class="status-indicator status-unknown"></span>
                <span>Kafka 连接状态检测中...</span>
            </div>
        </div>
        
        <!-- Kafka 连接测试 -->
        <div class="test-section">
            <h3>🔗 Kafka 连接测试</h3>
            <p>测试与 Kafka 服务器 (192.168.200.131:9092) 的连接状态</p>
            <button class="test-button" onclick="testKafkaConnection()">测试 Kafka 连接</button>
            <div id="kafka-result" class="result-area" style="display: none;"></div>
        </div>
        
        <!-- 示例1：生产者消费者测试 -->
        <div class="test-section">
            <h3>📤 示例1：生产者消费者测试</h3>
            <p>测试基本的消息生产和消费功能</p>
            
            <div class="input-group">
                <label>自定义消息内容:</label>
                <input type="text" id="customMessage" placeholder="输入要发送的消息" value="测试消息">
            </div>
            
            <button class="test-button" onclick="testSimpleMessage()">发送简单消息</button>
            <button class="test-button" onclick="testMessageWithKey()">发送带Key消息</button>
            <button class="test-button" onclick="testBatchMessages()">批量发送消息(5条)</button>
            <div id="example1-result" class="result-area" style="display: none;"></div>
        </div>
        
        <!-- 示例2：Kafka Streams测试 -->
        <div class="test-section">
            <h3>🔄 示例2：Kafka Streams 单词计数</h3>
            <p>测试 Kafka Streams 流式处理功能 - 实时统计单词出现次数</p>
            
            <div class="input-group">
                <label>输入文本进行单词计数:</label>
                <input type="text" id="streamText" placeholder="输入要统计的文本" value="hello kafka streams world">
            </div>
            
            <button class="test-button" onclick="testStreamWordCount()">发送文本统计</button>
            <button class="test-button" onclick="testStreamSamples()">发送示例文本(推荐)</button>
            <div id="example2-result" class="result-area" style="display: none;"></div>
        </div>
        
        <!-- 示例3：订单消息处理 -->
        <div class="test-section">
            <h3>📦 示例3：订单消息处理</h3>
            <p>测试复杂对象的序列化和反序列化 - 模拟订单处理流程</p>
            
            <div class="input-group">
                <label>产品名称:</label>
                <input type="text" id="productName" placeholder="输入产品名称" value="iPhone 15 Pro">
            </div>
            <div class="input-group">
                <label>数量:</label>
                <input type="number" id="quantity" placeholder="购买数量" value="1" min="1">
            </div>
            <div class="input-group">
                <label>价格:</label>
                <input type="number" id="price" placeholder="产品价格" value="7999.0" step="0.01">
            </div>
            
            <button class="test-button" onclick="testCreateOrder()">创建订单</button>
            <button class="test-button" onclick="testBatchOrders()">批量创建(3个)</button>
            <div id="example3-result" class="result-area" style="display: none;"></div>
        </div>
        
        <!-- 示例4：温度传感器监控 -->
        <div class="test-section">
            <h3>🌡️ 示例4：温度传感器监控</h3>
            <p>模拟IoT设备数据上报 - 实时监控温度异常告警</p>
            
            <div class="input-group">
                <label>传感器ID:</label>
                <input type="text" id="sensorId" placeholder="传感器ID" value="sensor-001">
            </div>
            <div class="input-group">
                <label>温度值 (°C):</label>
                <input type="number" id="temperature" placeholder="留空则随机生成" step="0.1">
            </div>
            
            <button class="test-button" onclick="testReportTemp()">上报温度</button>
            <button class="test-button" onclick="testSimulateSensors()">模拟多传感器(10次)</button>
            <button class="test-button" onclick="testReportAlert()">上报高温告警</button>
            <div id="example4-result" class="result-area" style="display: none;"></div>
        </div>
        
        <!-- API接口列表 -->
        <div class="test-section">
            <h3>📚 可用 API 接口列表</h3>
            <ul class="api-list">
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/kafka/status</strong> - Kafka连接状态检查
                    <span class="badge info">基础</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/message/send</strong> - 发送简单消息
                    <span class="badge info">消息</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/message/send/with-key</strong> - 发送带Key的消息
                    <span class="badge info">消息</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/message/send/batch</strong> - 批量发送消息
                    <span class="badge info">消息</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/streams/word-count</strong> - Streams单词计数
                    <span class="badge info">Streams</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/streams/word-count/samples</strong> - 发送示例文本
                    <span class="badge info">Streams</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/order/create</strong> - 创建订单
                    <span class="badge info">订单</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/order/create/batch</strong> - 批量创建订单
                    <span class="badge info">订单</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/temperature/send</strong> - 上报温度数据
                    <span class="badge info">传感器</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/temperature/send/simulate</strong> - 模拟多传感器
                    <span class="badge info">传感器</span>
                </li>
                <li>
                    <span class="api-method get">GET</span> 
                    <strong>/api/temperature/send/alert</strong> - 上报高温告警
                    <span class="badge info">传感器</span>
                </li>
            </ul>
        </div>
        
        <!-- 使用提示 -->
        <div class="test-section">
            <h3>💡 使用提示</h3>
            <ul>
                <li>📌 确保 Kafka 服务器 (192.168.200.131:9092) 已启动</li>
                <li>📌 点击上面的按钮即可测试各个功能</li>
                <li>📌 查看控制台日志可以看到详细的消息处理过程</li>
                <li>📌 可以自定义消息内容后再发送</li>
                <li>📌 Streams示例会实时统计单词出现次数</li>
            </ul>
        </div>
    </div>

    <script>
        // 页面加载时自动检测Kafka状态
        window.onload = function() {
            testKafkaConnection();
        };
        
        // 测试Kafka连接
        async function testKafkaConnection() {
            const resultDiv = document.getElementById('kafka-result');
            const statusDiv = document.getElementById('kafka-status');
            const button = event ? event.target : null;
            
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="loading">🔄 正在测试Kafka连接...</div>';
            if (button) button.disabled = true;
            
            try {
                const response = await fetch('/api/kafka/status');
                const data = await response.json();
                
                if (data.connected) {
                    resultDiv.className = 'result-area success';
                    resultDiv.innerHTML = `
                        <strong>✅ Kafka连接成功！</strong><br>
                        <strong>服务器:</strong> ${data.bootstrapServers}<br>
                        <strong>测试时间:</strong> ${data.timestamp}<br>
                        <strong>状态:</strong> ${data.message}
                    `;
                    
                    statusDiv.innerHTML = '<span class="status-indicator status-online"></span><span>Kafka 连接正常</span>';
                    if (button) button.className = 'test-button success';
                } else {
                    throw new Error(data.message || '连接失败');
                }
            } catch (error) {
                resultDiv.className = 'result-area error';
                resultDiv.innerHTML = `
                    <strong>❌ Kafka连接失败！</strong><br>
                    <strong>错误信息:</strong> ${error.message}<br>
                    <strong>提示:</strong> 请检查Kafka服务器是否启动
                `;
                
                statusDiv.innerHTML = '<span class="status-indicator status-offline"></span><span>Kafka 连接失败</span>';
                if (button) button.className = 'test-button error';
            } finally {
                if (button) button.disabled = false;
            }
        }
        
        // 测试简单消息发送
        async function testSimpleMessage() {
            const message = document.getElementById('customMessage').value || '测试消息';
            await testApi(`/api/message/send?message=${encodeURIComponent(message)}`, 'example1-result');
        }
        
        // 测试带Key消息发送
        async function testMessageWithKey() {
            const message = document.getElementById('customMessage').value || '测试消息';
            await testApi(`/api/message/send/with-key?key=test-user&message=${encodeURIComponent(message)}`, 'example1-result');
        }
        
        // 测试批量消息发送
        async function testBatchMessages() {
            await testApi('/api/message/send/batch?count=5', 'example1-result');
        }
        
        // 测试Streams单词计数
        async function testStreamWordCount() {
            const text = document.getElementById('streamText').value || 'hello kafka streams';
            await testApi(`/api/streams/word-count?text=${encodeURIComponent(text)}`, 'example2-result');
        }
        
        // 测试Streams示例
        async function testStreamSamples() {
            await testApi('/api/streams/word-count/samples', 'example2-result');
        }
        
        // 测试创建订单
        async function testCreateOrder() {
            const productName = document.getElementById('productName').value || 'iPhone 15 Pro';
            const quantity = document.getElementById('quantity').value || 1;
            const price = document.getElementById('price').value || 7999.0;
            await testApi(`/api/order/create?productName=${encodeURIComponent(productName)}&quantity=${quantity}&price=${price}`, 'example3-result');
        }
        
        // 测试批量创建订单
        async function testBatchOrders() {
            await testApi('/api/order/create/batch?count=3', 'example3-result');
        }
        
        // 测试上报温度
        async function testReportTemp() {
            const sensorId = document.getElementById('sensorId').value || 'sensor-001';
            const temperature = document.getElementById('temperature').value;
            let url = `/api/temperature/send?sensorId=${encodeURIComponent(sensorId)}`;
            if (temperature) {
                url += `&temperature=${temperature}`;
            }
            await testApi(url, 'example4-result');
        }
        
        // 测试模拟多传感器
        async function testSimulateSensors() {
            await testApi('/api/temperature/send/simulate?count=10', 'example4-result');
        }
        
        // 测试上报高温告警
        async function testReportAlert() {
            const sensorId = document.getElementById('sensorId').value || 'sensor-001';
            await testApi(`/api/temperature/send/alert?sensorId=${encodeURIComponent(sensorId)}`, 'example4-result');
        }
        
        // 通用API测试函数
        async function testApi(url, resultId) {
            const resultDiv = document.getElementById(resultId);
            const button = event.target;
            
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="loading">🔄 正在调用API...</div>';
            button.disabled = true;
            
            try {
                const response = await fetch(url);
                const data = await response.json();
                
                resultDiv.className = 'result-area success';
                resultDiv.innerHTML = `
                    <strong>✅ API调用成功！</strong><br>
                    <strong>响应数据:</strong>
                    <pre>${JSON.stringify(data, null, 2)}</pre>
                `;
                
                button.className = 'test-button success';
                
                // 3秒后重置按钮样式
                setTimeout(() => {
                    button.className = 'test-button';
                }, 3000);
                
            } catch (error) {
                resultDiv.className = 'result-area error';
                resultDiv.innerHTML = `
                    <strong>❌ API调用失败！</strong><br>
                    <strong>错误信息:</strong> ${error.message}
                `;
                button.className = 'test-button error';
            } finally {
                button.disabled = false;
            }
        }
    </script>
</body>
</html>

